import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import * as Animatable from 'react-native-animatable'
import { StyleSheet, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
const AllArray = new Array(19).fill(0)
class Gear extends PureComponent {
  state = {
    progress: 0
  }

  setNativeProps ({ progress }) {
    if (Math.abs(progress - this.state.progress) > 0.03 || progress > 0.9) {
      this.setState({
        progress
      })
    }
  }

  render () {
    const { style } = this.props
    const { progress } = this.state
    const value = ScaleS(72 * progress)
    const maskArray = AllArray.filter(
      (e, index) => index <= Math.ceil(AllArray.length * progress)
    )
    return (
      <View style={[styles.container, style]}>
        <View style={styles.grayLineWrap}>
          {AllArray.map((e, index) => (
            <View key={`grayLine${index}`} style={styles.grayLine} />
          ))}
        </View>
        <View style={[styles.linearBG, { width: value, paddingRight: ScaleS(3) }]}>
          <LinearGradient
            style={styles.linear}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            colors={['#45D048', '#EFA261', '#EB4C42']}
          >
          </LinearGradient>
          <View style={[styles.linearBG, styles.maskWrap]}>
            {maskArray.map((e, index) => (
              <View key={`maskLine${index}`} style={styles.maskLine} />
            ))}
          </View>
          <View style={styles.point} />
        </View>
      </View>
    )
  }
}
Gear.propTypes = {
  style: PropTypes.object
}
export default Animatable.createAnimatableComponent(
  Gear
)
const styles = StyleSheet.create({
  container: {
    height: ScaleS(8),
    width: ScaleS(72),
    // backgroundColor: 'red',
    position: 'relative'
  },
  grayLineWrap: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row'
  },
  grayLine: {
    width: ScaleS(1),
    height: ScaleS(8),
    backgroundColor: '#E7E7E7',
    marginRight: ScaleS(3)
  },
  linearBG: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0
  },
  linear: {
    flex: 1
  },
  point: {
    position: 'absolute',
    top: ScaleS(-3.5),
    right: ScaleS(2),
    backgroundColor: '#EB4C42',
    borderRadius: ScaleS(0.75),
    width: ScaleS(2),
    height: ScaleS(15)
  },
  maskWrap: {
    flexDirection: 'row'
  },
  maskLine: {
    width: ScaleS(3),
    height: ScaleS(8),
    backgroundColor: '#FFFFFF',
    marginLeft: ScaleS(1)
  }
})
